<template>
  <div class="login-wrap">
    <el-row justify="center" style="height: 100%" align="middle">
      <el-col :xs="0" :md="12" :lg="16">
        <!-- <img src="http://demo.site.niucloud.com/admin/assets/login_index_left-1769a342.png"  alt=""> 
          -->
        <div>
          <h1>欢迎光临ND管理系统</h1>
        </div>
      </el-col>

      <el-col :xs="22" :sm="12" :md="8" :lg="6" :xl="4">
        <div
          class="grid-content ep-bg-purple-dark"
          style="display: flex; height: 100%; align-items: center"
        />
        <!-- <el-select v-model="language" @change="handleSetLanguage">
        <el-option v-for="locale in $i18n.availableLocales"
                   :key="locale"
                   :disabled="language===locale" :value="locale">{{ locale }}</el-option>
      </el-select> -->
        <div class="bg-white p-40 b-radius">
          <h2>请登录</h2>
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            autocomplete="on"
            label-position="left"
          >
            <!-- <div class="title-container tracking-in-contract-bck">
          <h3 class="title heartbeat">
            {{ $t('system.title') }}
          </h3>
        </div> -->

            <el-form-item prop="userName">
              <el-input
                v-model="loginForm.userName"
                :placeholder="$t('login.userName')"
                name="userName"
                size="large"
                :prefix-icon="User"
              />
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input
                :key="passwordType"
                v-model="loginForm.passWord"
                :placeholder="$t('login.passWord')"
                :type="passwordType"
                name="passWord"
                :prefix-icon="Lock"
                size="large"
                :show-password="showPwd"
                @blur="capsTooltip = false"
              />
            </el-form-item>

            <el-button
              :loading="loading"
              type="primary"
              size="large"
              class="loginBtn"
              @click="toLogin"
            >
              {{ $t("login.logIn") }}
            </el-button>
          </el-form>
        </div>

        <!-- <el-select v-model="selectValue" style="margin-top: 20px;">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select> -->
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import appStore from "@/pinia";
import { Search, User, Lock } from "@element-plus/icons-vue";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();

    const { proxy }: any = getCurrentInstance();

    const language = ref<string>(appStore.appModule?.language);

    const loginFormRef = ref();

    const { t } = useI18n();
    const showPwd = ref(true);
    const state = reactive({
      loginForm: {
        userName: "",
        passWord: "",
      },
      selectValue: "",
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      loginRules: {
        userName: [
          {
            message: computed(() => t("login.userNameMessage")),
            required: true,
            trigger: "blur",
          },
        ],
        passWord: [
          {
            message: computed(() => t("login.passWordMessage")),
            required: true,
            trigger: "blur",
            min: 4,
            max: 30,
          },
        ],
      },
      passwordType: "passWord",
      loading: false,
      capsTooltip: false,
    });

    const handleSetLanguage = (lang: string) => {
      proxy.$i18n.locale = lang;
      console.log(appStore.appModule, " appStore.appModule");

      appStore.appModule?.setLanguage(lang);
      // 这里是修改当前页面在浏览器的标签名称
      const title = route.meta.title
        ? `${t(`route.${route.meta.title}`)} - ${t("system.title")}`
        : `${t("system.title")}`;
      document.title = title;
    };
    const toLogin = () => {
      loginFormRef.value.validate((value: any, fields: any) => {
        if (value) {
          router.push({
            path: "/home1",
          });
        }
      });
      // let params={
      //   username:"123",
      //   password:"12341231"
      // }
      // Login(params).then((res:any)=>{
      //   console.log(res,'res');

      // })
    };

    return {
      ...toRefs(state),
      loginFormRef,
      language,
      handleSetLanguage,
      Search,
      User,
      Lock,
      route,
      showPwd,
      toLogin,
    };
  },
});
</script>
<style lang="scss" scoped>
.login-wrap {
  background-image: url("http://demo.site.niucloud.com/admin/assets/login_index_bg-c0e47ae7.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
</style>
